<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位和overflow</title>
    <style>
        .overflow-hidden {
            overflow: hidden;
            width: 100px;
            height: 100px;
            display: inline-block;
        }

        .rel-div {
            position: relative;
            height: 100px;
            width: 100px;
            display: inline-block;
        }

        .abs-div {
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="rel-div">
        <!-- 不会裁剪 -->
        <div class="overflow-hidden">
            <div class="abs-div">
                一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十四二三四五六七八九十五二三四五六七八九十
            </div>
        </div>
    </div>
    <div class="overflow-hidden">
        <div class="rel-div">
            <!-- 会裁剪 -->
            <div class="abs-div">
                一二三四五六七八九十二二三四五六七八九十三二三四五六七八九十四二三四五六七八九十五二三四五六七八九十
            </div>
        </div>
    </div>
</body>

</html>